<template>
  <div>
    <!--首页-->
    <x-header v-if="page==1" style="color: #fff;background: none;" right-options.showMore="true">
      <router-link to="/project1/view1/class" slot="overwrite-left" class="iconfont icon-caidan" style="color: #fff;font-size: 22px;"></router-link>
      <div class="search" @click="toSearch">
        <input type="text" placeholder="请输入要搜索的内容" v-model="searchText">
        <i class="iconfont icon-sousuo" style="float: right;padding: 0 1%;font-size: 1.3rem;;"></i>
      </div>
      <i slot="right" class="iconfont icon-xiaoxi" style="color: #fff;font-size: 22px;"></i>
    </x-header>
    <!--分类-->
    <x-header v-if="page==2" style="color: #fff;background: #33bb99;width:100%;z-index: 99;position:fixed;top:0;" right-options.showMore="true"  :left-options="{backText: ''}">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      <div class="search" @click="toSearch">
        <input type="text" placeholder="请输入要搜索的内容" v-model="searchText">
        <i class="iconfont icon-sousuo" style="float: right;padding: 0 1%;font-size: 1.3rem;;"></i>
      </div>
      <i slot="right" class="iconfont icon-xiaoxi" style="color: #fff;font-size: 22px;"></i>
    </x-header>
    <!--商品详情/电铺-->
    <x-header v-if="page==3" style="color: #fff;background: #33bb99;z-index: 999;" right-options.showMore="true"  :left-options="{backText: ''}">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      <div>
        {{title?title:'商品详情'}}
      </div>
      <i slot="right" class="iconfont icon-fenxiang" style="color: #fff;font-size: 22px;"></i>
    </x-header>
    <!--搜索-->
    <x-header v-if="page==4" style="color: #fff;background: #33bb99;" right-options.showMore="true">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
      <div class="search">
        <input type="text" placeholder="请输入要搜索的内容" v-model="searchText">
      </div>
      <i class="iconfont icon-sousuo" @click="clickSearch" slot="right" style="float: right;color:#fff;padding: 0 1%;font-size: 1.3rem;"></i>
    </x-header>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        searchText:'',
      }
    },
    props:['page','title'],
    methods:{
      back(){
        this.$emit('transferUser',false)
      },
      clickSearch(){
        this.$emit('clickToSearch',{state:true,text:this.searchText})
      },
      toSearch(){
        this.$router.push('/project1/view1/search');
      }
    }
  }
</script>
<style scoped>
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .search{
    float: left;
    width:100%;
    border-bottom:1px #fff solid;
    line-height:35px;
  }
  input::-webkit-input-placeholder{
    color:#fff;
    font-size:0.8rem;
  }
  input::-moz-placeholder{
    color:#fff;
    font-size:0.8rem;
  }
  input:-ms-input-placeholder{
    color:#fff;
    font-size:0.8rem;
  }
  .search input{
    line-height: 33px;
    outline: none;
    background: none;
    border:0;color: #fff;
    float: left;
    padding-left: 1%;
    font-size: 1rem;
    width: 85%;
  }
</style>
